import React, {Component} from 'react';
import PropTypes from 'prop-types';
import {Modal, Spin} from 'antd';
import {formatMessage} from './intl';
import DescriptionList from 'ant-design-pro/lib/DescriptionList';
import {getPartWarrantyCategoryDetail} from './api';
import styles from './styles.css';
import {formatDateTime, conventEnumValueToString} from '../utils';
import {DATETIME_FORMAT} from '../constants';
import {baseDataStatus} from '../Enum';
const {Description} = DescriptionList;

class Content extends Component {
    static propTypes = {
        id: PropTypes.string,
    }

    state = {
        data: {},
        loading: false,
    }
        
    componentDidMount() {
        this.setState({
            loading: true
        });
        getPartWarrantyCategoryDetail(this.props.id).then(res => {
            if(res.ok) this.setState({
                data: res.data,
                loading: false
            });
            else this.setState({
                loading: false
            });
        });
    }

    onChange = (value, name) => {
        this.setState({
            data: {
                ...this.state.data,
                [name]: value
            }
        });
    }

    render() {
        const {data} = this.state;
        return (
            <Spin spinning={this.state.loading}>
                <DescriptionList col={2} size="large" className={styles.marginBottom}>
                    <Description
                        term={formatMessage({
                            id: 'detailModal.code',
                            defaultMessage: '编号'
                        })}>
                        {data.code}
                    </Description>
                    <Description
                        term={formatMessage({
                            id: 'detailModal.name',
                            defaultMessage: '名称'
                        })}>
                        {data.name}
                    </Description>
                    <Description
                        term={formatMessage({
                            id: 'detailModal.status',
                            defaultMessage: '状态'
                        })}>
                        {conventEnumValueToString(baseDataStatus, data.status)}
                    </Description>
                    <Description
                        term={formatMessage({
                            id: 'detailModal.creatorName',
                            defaultMessage: '创建人'
                        })}>
                        {data.creatorName}
                    </Description>
                    <Description
                        term={formatMessage({
                            id: 'detailModal.createTime',
                            defaultMessage: '创建时间'
                        })}>
                        {formatDateTime(data.createTime, DATETIME_FORMAT)}
                    </Description>
                    <Description
                        term={formatMessage({
                            id: 'detailModal.modifierName',
                            defaultMessage: '修改人'
                        })}>
                        {data.modifierName}
                    </Description>
                    <Description
                        term={formatMessage({
                            id: 'detailModal.modifyTime',
                            defaultMessage: '修改时间'
                        })}>
                        {formatDateTime(data.modifyTime, DATETIME_FORMAT)}
                    </Description>
                    <Description
                        term={formatMessage({
                            id: 'detailModal.abandonerName',
                            defaultMessage: '作废人'
                        })}>
                        {data.abandonerName}
                    </Description>
                    <Description
                        term={formatMessage({
                            id: 'detailModal.abandonTime',
                            defaultMessage: '作废时间'
                        })}>
                        {formatDateTime(data.abandonTime, DATETIME_FORMAT)}
                    </Description>
                </DescriptionList>
                <DescriptionList col={1} size="large" className={styles.marginBottom}>
                    <Description
                        term={formatMessage({
                            id: 'detailModal.remark',
                            defaultMessage: '备注'
                        })}>
                        {data.remark}
                    </Description>
                </DescriptionList>
            </Spin>
        );
    }
}

export default function EditModal(props) {
    return (
        <div>
            <Modal
                title={formatMessage({
                    id: 'detailModal.modal.title',
                    defaultMessage: '详情'
                })}
                maskClosable={false}
                footer={null}
                visible={props.visible}
                destroyOnClose={true}
                onCancel={props.onCancel}>
                <Content id={props.id} />
            </Modal>
        </div>
    );
}

EditModal.propTypes = {
    visible: PropTypes.bool.isRequired,
    onCancel: PropTypes.func.isRequired,
    id: PropTypes.string,
};
